<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>聊天室</title>
</head>
<style type="text/css">
	#main{
		width:50%;
		height: 800px;
		border:1px solid black;
	}
	input {
		width:50%;
	}
</style>
<body>
	<div id="main" style="overflow-y:scroll;">

	</div>
	<div>
		<input type="text" id="content">
		<button id="sub">发送</button>
	</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
		var ws = new WebSocket("ws://ip:6688");

         (function socket()
         {
            if ("WebSocket" in window)
            {
               
               // 打开一个 web socket
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  // ws.send("发送数据");
                  // console.log('服务已连接等待数据');
                  alert("聊天室已连接");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  // alert("数据已接收...");
                  data = JSON.parse(received_msg);
                  console.log(data)
                  if(data.data.uid == localStorage.getItem("uid")){
                  		html = '<div style="display: block;text-align: right;margin-right:10px; ">'+
									'<div style="color:blue">'+
										data.data.nickname+
									'</div>'+
									data.data.content+
								'</div>';
						// console.log(html);
                  		$("#main").append(html);
                  }else{
                  		html = '<div style="display: block;text-align: left;margin-right:10px; ">'+
									'<div style="color:green">'+
										data.data.nickname+
									'</div>'+
									data.data.content+
								'</div>';
						// console.log(html);
                  		$("#main").append(html);
                  }
                  
                  var div = document.getElementById('main');
                div.scrollTop = div.scrollHeight;

               };
                
               ws.onclose = function()
               { 
                  socket();
               };
            }
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         })();

         $("#sub").click(function(){
         	var content = $("#content").val();
         	if(content == '' || content == undefined || content == null){
         	    alert('消息不能为空');
         	}else{
             	var data = content+','+localStorage.getItem("nickname")+','+localStorage.getItem("uid");
             	ws.send(data);
             	$("#content").val("");
         	}
         })
         
         $(document).keyup(function(event){
            if(event.keyCode ==13){
                var content = $("#content").val();
                if(content == '' || content == undefined || content == null){
             	    alert('消息不能为空');
         	    }else{
                 	var data = content+','+localStorage.getItem("nickname")+','+localStorage.getItem("uid");
                 	ws.send(data);
                 	$("#content").val("");
         	    }
              }
            });
         
         
         
    
</script>